<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        .cart {
            width: 800px;
            padding: 0 10px 10px;
            border: 1px solid #D5E5F5;
            margin: 0 auto;
        }

        .cart-title {
            margin-bottom: 10px;
            font-size: 14px;
            border-bottom: 1px solid #AED2FF;
            line-height: 30px;
            height: 30px;
            font-weight: 700;
            text-indent: 15px;
            color: #333;
            font-family: 'Microsoft YaHei';
        }

        .cart-table {
            width: 100%;
            margin: 0 auto;
            border-collapse: collapse;
            font-size: 12px;
            font-family: Verdana, "Microsoft YaHei";
            color: #333;
        }

        .cart-table th {
            border-bottom: 2px solid #B2D1FF;
            font-weight: normal;
            height: 35px;
            line-height: 23px;
        }

        .cart-item {
            background-color: #FAFCFF;
            border-bottom: 1px dotted #84B3FD;
        }

        .cart-item td {
            height: 55px;
            text-align: center;
        }

        .cart-item .cart-txt-left {
            text-align: left;
        }

        .cart-name {
            color: #3366D4;
            font-weight: bold;
        }

        .cart-subtotal {
            color: #FF3334;
            font-weight: bold;
        }

        .cart-reduce,
        .cart-add {
            display: inline-block;
            width: 16px;
            height: 16px;
            line-height: 16px;
            color: #FFF;
            background-color: #BDBDBD;
            border: 0;
            cursor: pointer;
            border-radius: 2px;
            font-family: 'Arial';
            font-size: 13.3333px;
        }

        .cart-reduce:hover,
        .cart-add:hover {
            background-color: #FF9900;
        }

        .cart-num {
            margin: 5px;
            width: 35px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            padding: 0 3px;
            display: inline-block;
            background: #fff;
            border: 1px solid #bbb
        }

        .cart-del,
        .cart-all {
            color: #3366D4;
        }

        .cart-del:hover,
        .cart-all:hover {
            text-decoration: underline;
            cursor: pointer
        }

        .cart-bottom {
            height: 55px;
            text-align: right
        }

        .cart-bottom .cart-all {
            position: relative;
            top: 1px
        }

        .cart-total-price {
            color: #FF3334;
            font-weight: bold;
            font-size: 16px;
        }

        .cart-bottom-btn {
            color: #FFF;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin: 0 20px;
            background: #FE8502;
            border: 1px solid #FF6633;
            border-radius: 5px 5px 5px 5px;
            padding: 6px 12px;
        }

        .cart-bottom-btn:hover {
            background: #FF6600;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            line-height: 60px;
            font-size: 12px;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }

        /* li {
            margin-left: 100px;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neast163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.svg" alt=""> 个人中心
                    </a>
                    <a href="../pages/Neaste163.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.svg" alt=""> 退出登录
                    </a>
                    <a href="../pages/shopcart.html">
                        <img class="h-c-img" src="../images/img03.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neast163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/inde.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faqa.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/NeasteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/sugges.html" style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>
    <div class="cart">
        <div class="cart-title">我的购物车</div>
        <table class="cart-table">
            <tr>
                <th width="60"><span class="cart-all">全选</span></th>
                <th>商品</th>
                <th width="120">单价</th>
                <th width="100">数量</th>
                <th width="120">小计</th>
                <th width="80">操作</th>
            </tr>
            <tr class="cart-item">
                <td><input class="cart-check" type="checkbox" checked></td>
                <td class="cart-txt-left"><span class="cart-name">Loading...</span></td>
                <td><span class="cart-price">0</span></td>
                <td><span class="cart-reduce">-</span><span class="cart-num">0</span><span class="cart-add">+</span>
                </td>
                <td><span class="cart-subtotal">0</span></td>
                <td><span class="cart-del">删除</span></td>
            </tr>
            <tr class="cart-bottom">
                <td colspan="6">
                    <span class="cart-bottom-span">已选择 <span class="cart-total-num">0</span> 件商品</span>
                    <span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
                    <span class="cart-bottom-btn"><a href="../pages/index.html">提交订单</a></span>
                </td>
            </tr>
        </table>
    </div>
    <div class="box color-1">
        <div class="footer">
            <div class="footer-1">
                <div class="f-top">
                    <p class="f-title">
                        Contact
                    </p>
                    <p class="f-content">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom">
                    <p class="f-title">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content">
                        邮箱：qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Quick Links
                </p>
                <div class="f-content">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Products
                </p>
                <div class="f-content">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Feedback
                </p>
                <div class="f-content f-content2">
                    <textarea placeholder="内容" name="" id="idea" cols="50" rows="5"></textarea>
                    <button onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../public/js/ShopCart.js"></script>
    <script>
        ShopCart('cart', [{
            name: '合金车载充电器',
            price: 188.00,
            num: 1
        }, {
            name: '曲面高透保护膜',
            price: 49.00,
            num: 2
        }, {
            name: '击音蓝牙接收器',
            price: 99.00,
            num: 5
        }, {
            name: '无线蓝牙耳机',
            price: 899.00,
            num: 8
        },]);

        function submit() {
            var idea = document.getElementById('idea').value.trim()
            if (!idea) {
                alert('请输入内容在提交');
            } else {
                alert('感谢您的意见: ' + idea);
            }
        }
    </script>
</body>

</html>